<nz-drawer
        (nzOnClose)="close()"
        [nzBodyStyle]="{ overflow: 'auto' }"
        [nzFooter]="footerTpl"
        [nzMaskClosable]="false"
        [nzTitle]="(menuEditType$ | async) === 'edit' ? '编辑':'创建'"
        [nzVisible]="true"
        [nzWidth]="600"
>
  <form (keyup.control.enter)="submit()" *nzDrawerContent [formGroup]="validateForm" ngxsForm="demo.menuEditForm"
        nz-form>

    <nz-form-item>
      <nz-form-label nzFor="name" nzRequired nzSpan="3">名称</nz-form-label>
      <nz-form-control [nzErrorTip]="nameErrorTpl" nzSpan="17">
        <input formControlName="name" id="name" nz-input/>
        <ng-template #nameErrorTpl let-control>
          <ng-container *ngIf="control.hasError('required')">请输入名称!</ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label nzFor="code" nzRequired nzSpan="3">code</nz-form-label>
      <nz-form-control [nzErrorTip]="codeErrorTpl" nzHasFeedback nzSpan="17" nzValidatingTip="校验中...">
        <input formControlName="code" id="code" nz-input/>
        <ng-template #codeErrorTpl let-control>
          <ng-container *ngIf="control.hasError('required')">请输入code!</ng-container>
          <ng-container *ngIf="control.hasError('duplicated')">code重复了!</ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>

  </form>

  <ng-template #footerTpl>
    <div style="float: right">
      <button (click)="close()" nz-button style="margin-right: 8px;">取消</button>
      <button (click)="submit()" [disabled]="!validateForm.dirty || validateForm.invalid" nz-button nzType="primary">
        提交
      </button>
    </div>
  </ng-template>
</nz-drawer>
